<template>
	<view class="goods-order-item" :style="{'--statusColor':statusColor,'--statusBgcolor':statusBgcolor}">
		<view class="goods-order-item-top-wrapper">
			<view class="top-text">
				{{topText}}
			</view>
			<view class="goods-order-status">
				{{statusLabel}}
			</view>
		</view>
		<view class="goods-detail-wrapper">
			<view class="goods-image-wrapper">
				<image :src="goodsImage" mode="aspectFill" style="width: 100%;height: 100%;"/>
			</view>
			<view class="goods-info-wrapper">
				<view class="goods-name">
					{{goodsName}}
				</view>
				<view class="godds-desc" :style="{'backgroundColor':goodsDesc?'#F2F2F2':'#ffffff'}">
					{{goodsDesc}}
				</view>
				<view class="goods-info-bottom">
					<slot name="info-bottom"/>
				</view>
			</view>
		</view>
		<view class="goods-order-item-bottom-wrapper" v-if="$slots['footer']">
			<slot name="footer"/>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {defineProps} from 'vue';
	
	const props = defineProps({
		topText:{
			type:String,
			default:'',
		},
		statusLabel:{
			type:String,
			default:'',
		},
		statusColor:{
			type:String,
			default:'',
		},
		statusBgcolor:{
			type:String,
			default:'',
		},
		goodsName:{
			type:String,
			default:'',
		},
		goodsDesc:{
			type:String,
			default:'',
		},
		goodsImage:{
			type:String,
			default:'',
		}
	})
</script>

<style scoped lang="scss">
	@import "./goodsOrderItem.scss";
</style>